/* 用户h5模版列表页面
 * H5ModelList.jsx
 */
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { push } from 'redux-router';

import '../../static/css/h5list.css';

import {getPageComponents} from '../../utils/H5helper';
import {listH5ModalData,copyNewH5,clearListH5Data,getH5Categories} from '../../actions/h5/H5Action';



//单个页面
class SingePage extends Component{

	componentDidMount(){
		//鼠标的移入移出,显示h5标题和发布状态
        $("#pageItem_"+this.props.id).mouseover(function (){  
            $(this).find('.bottomInfo').show();
            $(this).find('.qrInfo').show();
        }).mouseout(function (){  
            $(this).find('.bottomInfo').hide();
            $(this).find('.qrInfo').hide();
        }); 
	}

	componentWillUnmount(){
		
	}

	toNewPage(uniqueCode){
		this.props.dispatch(push(__ROOTPATH__+'h5edit/edit/'+uniqueCode));
	}

	toCopyPage(){
		this.props.dispatch(copyNewH5(this.props.id,this.toNewPage.bind(this)));
	}


	render(){
		
		let statusInfo=(<p></p>);
		if(this.props.catName!='个性定制')
			statusInfo=(<p className="status" onClick={this.toCopyPage.bind(this)} style={{color:'#00ff40',cursor:'pointer'}}>使用模版</p>);
		const imgBase64='data:image/png;base64,'+this.props.qrcode;
		const qrInfo=(
				<div className="qrInfo">
					<img src={imgBase64} style={{display:'block',width:'160px',height:'160px'}} />	
				</div>
		);
		
		return(
			<div className="column">
				<div className="list-item-wrap">
				    <div className="list-item-view" id={'pageItem_'+this.props.id}>
				    	{this.props.children}
				    	{qrInfo}
				    	<div className="bottomInfo">
				    		<p className="title">{this.props.title}</p>
				    		{statusInfo}
				    	</div>
				    </div>
				</div>
			</div>
		);
	}
}


//含有数据库内容的页面
class ContentPage extends Component{

	render(){
		const pageData=this.props.pageData;
		const components=getPageComponents(pageData);
		const pageAttr=pageData.get('attributes');
		const bkstyle={opacity: pageAttr.get('backgroundOpacity'), background:pageAttr.get('background'),backgroundSize:'cover!important'};
		let pageContent=(<div className="page-thumbnail">
							<div className="backface" style={bkstyle}></div>
							{components}
						</div>);
		return (<SingePage {...this.props}>{pageContent}</SingePage>)
	}
}




class H5ModelList extends Component{
	constructor(props){
		super(props);
		this.state={
			currCat:''
		}
	}

	componentDidMount(){
		this.props.dispatch(listH5ModalData(null,10));
		this.props.dispatch(getH5Categories());
	}

	componentWillUnmount(){
		this.props.dispatch(clearListH5Data());
	}

	loadMoreData(){
		const lastData=this.props.datalist.last();
		this.props.dispatch(listH5ModalData(lastData.get('id'),10));
	}

	categoryClick(cat=''){
		this.setState({currCat:cat});
		this.props.dispatch(clearListH5Data());
		this.props.dispatch(listH5ModalData(null,10,cat));
	}

	render(){
		let pagelist=Array();
		this.props.datalist.forEach(item=>{
			if(item && Immutable.Map.isMap(item)){
				const cprops={
					dispatch:this.props.dispatch,
					title:item.get('title'),
					pageData:Immutable.fromJS(item.get("first_page")),
					status:item.get('is_public'),
					id:item.get('id'),
					uniqueCode:item.get('unique_code'),
					qrcode:item.get('qr_code'),
					catName:item.get('cat_name')
				};
				pagelist.push(<ContentPage key={item.get('id')} {...cprops} />);
			}
		});

		let btnCss="ui primary button";
		if(this.props.loadingData){
			btnCss="ui primary loading button";
		}
		let allCategory=(<div className="ui button" onClick={()=>this.categoryClick('')}>全部</div>);
		if(this.state.currCat=='')
			 allCategory=(<div className="ui button active">全部</div>);
		const h5Categories=this.props.h5TplCategoryList.map(item=>{
			if(this.state.currCat==item.id){
				return (<div className="ui button active">{item.name}</div>);
			}
			return (<div className="ui button" onClick={()=>this.categoryClick(item.id)}>{item.name}</div>);
		});

		return(
			<div style={{margin:'1rem'}}>
				<div className="ui center aligned container">
					<div className="ui basic buttons">
					  {allCategory}
					  {h5Categories}
					</div>
				</div>
				<div className="ui five column grid" style={{margin:'10px 10px'}}>
					{pagelist}
				</div>
				{/*加载数据按钮*/}
				<div style={{width:'200px',margin:'20px auto'}}>
					<div className={btnCss} onClick={this.loadMoreData.bind(this)}>加载更多数据</div>
				</div>
			</div>
		);
	}
}

export default connect(state=>{
	return{
		datalist:state.app.h5DataList.datalist,
		loadingData:state.app.h5DataList.loadingData,
		h5TplCategoryList:state.app.h5DataList.h5TplCategoryList
	};
})(H5ModelList);
